﻿<style type="text/css">
    .sample_box
    {
    	/*background-color:#FFF;
	    border:#CCC solid 1px;
	    border-radius:10px;
	    box-shadow: 0 0 7px #CCC;*/
	    padding:0px 20px 20px 20px;
	    margin-bottom:20px;
    }
    .sample_title
    {
    	font-size:16px;
	    font-weight:bold;
    	margin-top:0px;
	    margin-bottom:20px;
    }
    .sample_preview
    {
	    border:#999 solid 1px;
	    padding:10px;
    }
    .sample_code
    {
	    border: #999 solid 1px;
	    font-family:Lucida Sans;
	    font-size:11px;
	    /*padding:10px;*/
    }
    .tb_apiconfig{ padding:0px; margin:0px 0px 20px 0px; }
    .tb_apiconfig td{ vertical-align:top; padding:4px 4px 15px 4px; }
    .tb_apiconfig td.label{ font-weight:bold; min-width:100px; padding-right:20px; }
</style>
<div class="content_box">
    <!-- Head : Title -->
    <div class="head">
        <div class="tl">Developer API</div>
        <div class="tr"><div class="button_set" id="action_bar"></div>&nbsp;</div>
    </div>
    
    <div class="content">
        <div id="horizontal" style="background:none; border:1px solid #CCCCCC; min-height: 450px; height:100%; width: 100%; border: 0; overflow:auto;">
            <div>
                <div id="treeview_api"></div>
                <script type="text/javascript">
                    var api_content_current = '';
                    var treeview_api = $("#treeview_api").kendoTreeView({
                        dragAndDrop: false,
                        dataSource: [
                                { text: "Datagrid", id: 'datagrid', expanded: true, items: [
                                    { text: "Simple Datagrid", id: 'datagrid_simple' },
                                    { text: "Column Setting", id: "datagrid_column" },
                                    { text: "Search Item", id: "datagrid_search" },
                                    { text: "Action Button", id: "datagrid_action" },
                                    { text: "Editable Datagrid", id: "datagrid_editable" },
                                    { text: "Method", id: "datagrid_method" }
                                ]
                                },
                                { text: "Form", id: "form", expanded: false, items: [
                                    { text: "Simple Form", id: "form_simple" },
                                    { text: "Combo/Listbox", id: "form_combo" },
                                    { text: "Input Datepicker", id: "form_date" },
                                    { text: "Input Numeric", id: "form_numeric" },
                                    { text: "Input Autocomplete", id: "form_autocomplete" },
                                    { text: "Popup Modal", id: "form_popup", items: [
                                        { text: "Local Content", id: "form_popup_local" },
                                        { text: "Remote Content", id: "form_popup_remote" }
                                    ] },
                                    { text: "Input LOV & Popup", id: "form_lov" }
                                ]
                                },
                                { text: "Chart", id: "chart", expanded: false, items: [
                                    { text: "Line", id: "chart_line" },
                                    { text: "Bar", id: "chart_bar" },
                                    { text: "Pie", id: "chart_pie" }
                                ]
                                },
                                { text: "UI Widget", id: "ui", expanded: false, items: [
                                    { text: "Tabs", id: "ui_tabs" },
                                    { text: "Tree", id: "ui_tree" },
                                    { text: "Tooltips", id: "ui_tooltips" }
                                ]
                                },
                                { text: "About API", id: "credit" }
                            ],
                        select: function(e) {
                            var data = TreeNodeData(e.node);
                            var id = (data.id == undefined ? '' : data.id); if (id == '') return false;
                            if (api_content_current != '') { $('#sample_' + api_content_current).hide(); }
                            api_content_current = id;
                            $('#sample_' + api_content_current).hide().fadeIn();

                            console.log(TreeNodeText(e.node));
                            console.log(TreeNodeData(e.node));
                        }
                    });
                </script>
            </div>
            <div id="container_sample_api">
            
                <!-- -------------------------- [ Datagrid ] -------------------------- -->
                <div class="sample_box" id="sample_datagrid">
                    <?php include("api_datagrid.php"); ?>
                </div>
                
                <!-- -------------------------- [ Editable Datagrid ] -------------------------- -->
                <div class="sample_box" id="sample_datagrid_editable">
                    <?php include("api_datagrid_editable.php"); ?>
                </div>

                <!-- -------------------------- [ Simple Datagrid ] -------------------------- -->
                <div class="sample_box" id="sample_datagrid_simple">
                    <?php include("api_datagrid_simple.php"); ?>
                </div>
                
                <!-- -------------------------- [ Datagrid Column ] -------------------------- -->
                <div class="sample_box" id="sample_datagrid_column">
                    <?php include("api_datagrid_column.php"); ?>
                </div>
                
                <!-- -------------------------- [ Datagrid Search ] -------------------------- -->
                <div class="sample_box" id="sample_datagrid_search">
                    <?php include("api_datagrid_search.php"); ?>
                </div>
                
                <!-- -------------------------- [ Datagrid Action ] -------------------------- -->
                <div class="sample_box" id="sample_datagrid_action">
                    <?php include("api_datagrid_action.php"); ?>
                </div>
                
                <!-- -------------------------- [ Form ] -------------------------- -->
                <div class="sample_box" id="sample_form">
                    <?php include("api_form.php"); ?>
                </div>
                
                <!-- -------------------------- [ Form Simple ] -------------------------- -->
                <div class="sample_box" id="sample_form_simple">
                    <?php include("api_form_simple.php"); ?>
                </div>
                
                <!-- -------------------------- [ Form Combo/Listbox ] -------------------------- -->
                <div class="sample_box" id="sample_form_combo">
                    <?php include("api_form_combo.php"); ?>
                </div>
                
                <!-- -------------------------- [ Form Date ] -------------------------- -->
                <div class="sample_box" id="sample_form_date">
                    <?php include("api_form_date.php"); ?>
                </div>
                
                <!-- -------------------------- [ Form Numeric ] -------------------------- -->
                <div class="sample_box" id="sample_form_numeric">
                    <?php include("api_form_numeric.php"); ?>
                </div>
                
                <!-- -------------------------- [ Form Popup ] -------------------------- -->
                <div class="sample_box" id="sample_form_popup">
                    <?php include("api_form_popup.php"); ?>
                </div>
                
                <!-- -------------------------- [ Form Popup Local Content ] -------------------------- -->
                <div class="sample_box" id="sample_form_popup_local">
                    <?php include("api_form_popup_local.php"); ?>
                </div>
                
                <!-- -------------------------- [ Form Popup Remote Content ] -------------------------- -->
                <div class="sample_box" id="sample_form_popup_remote">
                    <?php include("api_form_popup_remote.php"); ?>
                </div>
                
                <!-- -------------------------- [ Form LOV ] -------------------------- -->
                <div class="sample_box" id="sample_form_lov">
                    <?php include("api_form_lov.php"); ?>
                </div>
                
                <!-- -------------------------- [ Form Autocomplete ] -------------------------- -->
                <div class="sample_box" id="sample_form_autocomplete">
                    <?php include("api_form_autocomplete.php"); ?>
                </div>
                
                <!-- -------------------------- [ Chart ] -------------------------- -->
                <div class="sample_box" id="sample_chart">
                    <?php include("api_chart.php"); ?>
                </div>
                
                <!-- -------------------------- [ Chart Line ] -------------------------- -->
                <div class="sample_box" id="sample_chart_line">
                    <?php include("api_chart_line.php"); ?>
                </div>
                
                <!-- -------------------------- [ Chart Pie ] -------------------------- -->
                <div class="sample_box" id="sample_chart_pie">
                    <?php include("api_chart_pie.php"); ?>
                </div>
                
                <!-- -------------------------- [ UI Tabs ] -------------------------- -->
                <div class="sample_box" id="sample_ui_tabs">
                    <?php include("api_ui_tabs.php"); ?>
                </div>
                
                <!-- -------------------------- [ UI Tooltips ] -------------------------- -->
                <div class="sample_box" id="sample_ui_tooltips">
                    <?php include("api_ui_tooltips.php"); ?>
                </div>
                
                <!-- -------------------------- [ Credit ] -------------------------- -->
                <div id="sample_credit" style="display:none; font-size:11px; margin:5px 20px;">
                    <?php include("api_credit.php"); ?>
                </div>
            
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#horizontal").kendoSplitter({
                    panes: [
                        { collapsible: true, size: "200px" },
                        { collapsible: false }
                    ]
                    });
                $('#container').css('padding-bottom', '10px');
            });
        </script>
    </div>
    
    <!-- Footer -->
    <div class="foot" style="border-top:none">
        <div class="bl">&nbsp;<div class="debug_url" style="display:none;margin:-15px 0px 0px 0px;"><img src="<?php echo base_url() . 'content/images/load.png'; ?>" alt="" border="0" onclick="loadPage('<?php echo "/".$this->data['controller_name']."/".$this->data['action_name']."/"; ?>');" title="Reload This Page" style="cursor:pointer;margin-right:10px;" />  <?php echo "/".$this->data['controller_name']."/".$this->data['action_name']."/"; ?></div></div>
        <div class="br">&nbsp;</div>
    </div>
</div>


<?php /*


<!-- -------------------------- [ ___samplename___ ] -------------------------- -->
<div class="sample_box" id="___samplename___">
    <div class="sample_title">___samplename___</div>
    sample:<br />
    <div class="sample_preview">
    </div><br />
    code:
    <div class="sample_code" rel="brush: js; html-script: false;">
    </div>
</div>


*/ ?>







<script type="text/javascript">$('.sample_code').each(function(i, objCode) { var ls_script = $(objCode).text().replace(/</g, '&lt;'); var ls_rel = $(objCode).attr('rel'); var ln_height = $(objCode).height() + 30; var $iframe = $('<iframe class="test-wrap" src="about:blank" />'), background = '#fff', themeName = 'Default'; $(objCode).html('').append($iframe); $iframe.ready(function() { var doc = $iframe[0].contentDocument; $iframe.css('background', background).css('width', '100%').css('height', ln_height + 'px').css('border', '0').attr('frameborder', '0'); doc.write('' + '<scr' + 'ipt type="text/javascript" src="' + gs_path + '/Content/js/XRegExp.js"></scr' + 'ipt>' + '<scr' + 'ipt type="text/javascript" src="' + gs_path + '/content/js/shCore.js"></scr' + 'ipt>' + '<scr' + 'ipt type="text/javascript" src="' + gs_path + '/content/js/shBrushXml.js"></scr' + 'ipt>' + '<scr' + 'ipt type="text/javascript" src="' + gs_path + '/content/js/shBrushJScript.js"></scr' + 'ipt>' + '<link type="text/css" rel="stylesheet" href="' + gs_path + '/content/css/shCoreDefault.css"/>' + '<style type="text/css">body{ margin:0px; padding:0px; font-size:11px; }</style>' + '<pre type="syntaxhighlighter" class="' + ls_rel + '">' + ls_script + '</pre>' + '<scr' + 'ipt type="text/javascript">' + 'SyntaxHighlighter.highlight();' + '</scr' + 'ipt>'); doc.close(); }) });  $('.sample_box').each(function(i, objSample) { $(objSample).hide(); }); $('#treeview_api li:first .k-in:first').trigger('click');</script>
